#心电分析
<template>
  <div id="analyse">
    <div class="top">
      <div v-for="(item, index) in ecgList" :key="index" :id="&quot;container&quot; + index" style="min-width: 310px;"></div>
    </div>
    <div id="bottom" class="bottom">
      <div class="right">
        <div v-for="(item, index) in genreList" :key="index" :id="&quot;genre&quot; + index" class="genre" @click="aaaa"></div>
      </div>
      <div class="left">
        <div class="l-top">
          <div class="l-top-left">
            <div id="case"></div>
            <svg class="bg">
              <!-- <line x1='0' :y1="index * 23.8" x2='300' :y2="index * 23.8" stroke="#ff6f009c" strokeWidth="1"  v-for="(item,index) in 21" :key="index"/>
                            <line :x1="index * 28" y1='0' :x2="index * 28" y2='230' stroke="#ff6f009c" strokeWidth="1"  v-for="(item,index) in 12" :key="index + 100"/> -->
              <line :x1="locationE" :x2="locationE" y1="0" y2="230" stroke="#D0021B" style="stroke-width:2" @mousedown="mousedown($event, 'E')" />
              <line :x1="locationJ" :x2="locationJ" y1="0" y2="230" stroke="#D0021B" style="stroke-width:2" @mousedown="mousedown($event, 'J')" />
              <line :x1="locationST" :x2="locationST" y1="0" y2="230" stroke="#D0021B" style="stroke-width:2" @mousedown="mousedown($event, 'ST')" />
              <line :x1="locationT" :x2="locationT" y1="0" y2="230" stroke="#D0021B" style="stroke-width:2" @mousedown="mousedown($event, 'T')" />
            </svg>
            <div>
              <span :style="{left: locationE - 4 + 'px'}" class="plotLineText">E</span>
              <span :style="{left: locationJ - 4 + 'px'}" class="plotLineText">J</span>
              <span :style="{left: locationST - 8 + 'px'}" class="plotLineText">ST</span>
              <span :style="{left: locationT - 4 + 'px'}" class="plotLineText">T</span>
            </div>
            <div class="scaleList">
              <div @click="scale(-1)">
                <img src="./../../../assets/resource/ecg/minus.png" alt="">
              </div>
              <div @click="scale(1)">
                <img src="./../../../assets/resource/ecg/plus.png" alt="">
              </div>
              <div @click="scale(0)">
                <img src="./../../../assets/resource/ecg/sync.png" alt="">
              </div>
            </div>
            <div class="stepList">
              <div @click="step(-2)">
                <img src="./../../../assets/resource/ecg/step-backward.png" alt="">
              </div>
              <div @click="step(-1)">
                <img src="./../../../assets/resource/ecg/caret-left.png" alt="">
              </div>
              <div @click="step(1)">
                <img src="./../../../assets/resource/ecg/caret-right.png" alt="">
              </div>
              <div @click="step(2)">
                <img src="./../../../assets/resource/ecg/step-forward.png" alt="">
              </div>
            </div>
          </div>
          <div class="l-top-right">
            <div class="copy">
              <span class="title">显示通道</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button size="small" @click="dialogAvFVisible = true">手动设置</el-button>
            </div>
            <div class="copy">
              <span class="title">ST选项</span>
              <div v-for="(item, index) in dataList2" :key="index" class="list">
                <span class="name">{{ item.name }}</span>
                <el-input v-model="item.value" type="number" placeholder="请输入内容"></el-input>
                <span class="unit">ms</span>
              </div>
              <div class="item">
                <el-checkbox v-model="checked">所有通道相同设置</el-checkbox>
                <el-button size="small" @click="resetDataList2">重置</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="l-bottom">
          <div class="l-bottom-top">
            <div v-for="(item, index) in dataList3" :key="index" class="list">
              <span class="name">{{ item.name }}</span>
              <el-input v-model="item.value" type="number" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="l-bottom-bottom">
            <el-button class="otherBtn" @click="dialogOptionVisible = true">其他分析选项</el-button>
            <el-button class="startAnalyse">开始分析</el-button>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogAvFVisible"
      :before-close="avFHandleClose"
      title="选择导联"
      width="300px">
      <div v-for="(item, index) in dataList1" :key="index" class="list">
        <el-checkbox v-if="index === 0" v-model="item.checked" disabled></el-checkbox>
        <el-checkbox v-else v-model="item.checked"></el-checkbox>
        <span class="name">{{ item.name }}</span>
        <el-select v-model="item.value" placeholder="请选择" class="">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAvFVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogAvFVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogOptionVisible"
      :before-close="optionHandleClose"
      title="分析选项(心电)"
      width="760px">
      <div class="five copy">
        <span class="name">分析通道</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button @click="innerVisible = true">通道</el-button>
        <el-dialog
          :visible.sync="innerVisible"
          :before-close="avFHandleClose"
          title="选择导联"
          width="300px">

          <div class="five copy">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>

            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="(item, index) in options" :label="item.label" :key="index"></el-checkbox>
            </el-checkbox-group>
          </div>
                        
          <div v-for="(item, index) in dataList1" :key="index" class="list">
            <el-checkbox v-if="index === 0" v-model="item.checked" disabled></el-checkbox>
            <el-checkbox v-else v-model="item.checked"></el-checkbox>
            <span class="name">{{ item.name }}</span>
            <el-select v-model="item.value" placeholder="请选择" class="">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="innerVisible = false">取 消</el-button>
            <el-button type="primary" @click="innerVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="five copy">
        <span class="title">事件分类</span>
        <div class="five-list-box">
          <div v-for="(item, index) in dataList5" :key="index" class="five-list">
            <span class="name">{{ item.name }}</span>
            <el-input v-model="item.value" type="number" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div>
          <el-checkbox v-model="checked">长间期统计仅考虑窦性心搏</el-checkbox>
        </div>
      </div>
      <div class="five copy">
        <span class="title">ST扫描</span>
        <div class="five-list-box">
          <div v-for="(item, index) in dataList6" :key="index" class="five-list">
            <span class="name">{{ item.name }}</span>
            <el-input v-model="item.value" type="number" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div>
          <el-checkbox v-model="checked">ST段幅度统计时考虑斜率</el-checkbox>
        </div>
      </div>
      <div class="five copy">
        <span class="title">QRS分类</span>
        <div class="five-list-box">
          <div v-for="(item, index) in dataList7" :key="index" class="five-list">
            <span class="name">{{ item.name }}</span>
            <el-input v-model="item.value" type="number" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogOptionVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogOptionVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Papa from 'papaparse'
import * as samplesData from './../../../../public/js/ss'
var Highcharts = require('highcharts')

export default {
  data() {
    return {
      options: [{
        label: 'I',
        value: 0
      }, {
        label: 'II',
        value: 1
      }, {
        label: 'III',
        value: 2
      }, {
        label: 'aVR',
        value: 3
      }, {
        label: 'aVL',
        value: 4
      }, {
        label: 'aVF',
        value: 5
      }, {
        label: 'V1',
        value: 6
      }, {
        label: 'V2',
        value: 7
      }, {
        label: 'V3',
        value: 8
      }, {
        label: 'V4',
        value: 9
      }, {
        label: 'V5',
        value: 10
      }, {
        label: 'V6',
        value: 11
      }],
      value: '',

      dataList1: [{
        checked: true,
        name: '主分析通道',
        value: ''
      }, {
        checked: true,
        name: '辅助分析通道',
        value: ''
      }],
      dataList2: [{
        name: 'E点到R点',
        value: 265
      }, {
        name: 'J点到R点',
        value: 46
      }, {
        name: 'ST测点到J点',
        value: 62
      }, {
        name: 'T波结束点到R点',
        value: 381
      }],
      checked: false,

      dataList3: [{
        name: '开始时间(分)',
        value: 0
      }, {
        name: '扫描时间(时)',
        value: 24
      }, {
        name: '信号放大倍数',
        value: 1
      }],

      dataList5: [{
        name: '长间期(s)',
        value: 1.6
      }, {
        name: '停搏(s)',
        value: 2.0
      }, {
        name: '心动过速(BPM)',
        value: 100
      }, {
        name: '心动过缓(BPM)',
        value: 50
      }, {
        name: '最慢心率(>)',
        value: 30
      }, {
        name: '最快心率(<)',
        value: 250
      }],
      dataList6: [{
        name: 'ST段抬高(mV)',
        value: 0.2
      }, {
        name: 'ST段压低(mV)',
        value: 2.0
      }],
      dataList7: [{
        name: '不应期(ms)',
        value: 1.6
      }, {
        name: '室上早提前量(%)',
        value: 2.0
      }, {
        name: 'QTC计算方法',
        value: 100
      }],
      dialogAvFVisible: false,
      dialogOptionVisible: false,
      outerVisible: false,
      innerVisible: false,
      checkList: ['I'],
      checkAll: false,
      isIndeterminate: true,

      list: [],
      list1: [],
      list2: [],
      list2Value: 4,
      scaleValue: 16,
      ecgList: [{
        time: '10:48:41',
        name: 'aVF',
        data: this.list
      }, {
        time: '10:48:55',
        name: 'aVF',
        data: this.list
      }, {
        time: '10:49:09',
        name: 'aVF',
        data: this.list
      }, {
        time: '10:49:23',
        name: 'aVF',
        data: this.list
      }, {
        time: '10:49:23',
        name: 'aVF',
        data: this.list
      }, {
        time: '10:49:23',
        name: 'aVF',
        data: this.list
      }, {
        time: '10:49:23',
        name: 'aVF',
        data: this.list
      }, {
        time: '10:49:51',
        name: 'aVF',
        data: this.list
      }],
      genreList: [{
        name: 'I',
        data: this.list1
      }, {
        name: 'II',
        data: this.list1
      }, {
        name: 'III',
        data: this.list1
      }, {
        name: 'aVR',
        data: this.list1
      }, {
        name: 'aVL',
        data: this.list1
      }, {
        name: 'aVF',
        data: this.list1
      }, {
        name: 'V1',
        data: this.list1
      }, {
        name: 'V2',
        data: this.list1
      }, {
        name: 'V3',
        data: this.list1
      }, {
        name: 'V4',
        data: this.list1
      }, {
        name: 'V5',
        data: this.list1
      }, {
        name: 'V6',
        data: this.list1
      }],
      flag: false,
      locationE: 60,
      locationJ: 120,
      locationST: 210,
      locationT: 300,
      fecg_data: [],
      chart: undefined,
      bgList: [{

      }]
    }
  },
  created() {
    this.getData()
    this.$nextTick(() => {
      console.log(document.querySelector('#container1'))
      this.ecgList.forEach((item, index) => {
        this.createChart(item, index)
      })
      this.genreList.forEach((item, index) => {
        this.createGenreChart(item, index)
      })
      this.createCaseChart()
    })
  },
  methods: {
    handleCheckAllChange(val) {
      const result = this.options.map(item => {
        return item.label
      })
      this.checkList = val ? result : []
      this.isIndeterminate = false
    },
    createChart(item, index) {
      const that = this
      const widthValue = (window.innerWidth) - 10
      require('highcharts/modules/data')(Highcharts)
      Highcharts.chart(`container${index}`, {
        chart: {
          type: 'spline',
          width: widthValue,
          height: 60,
          backgroundColor: '#FFF'
        },
        credits: {
          enabled: false
        },
        title: {
          text: item.time,
          align: 'left',
          floating: true,
          y: 0,
          style: {
            fontSize: '14px',
            marginTop: '30px'
          }
        },
        subtitle: {
          text: item.name,
          align: 'left',
          y: 20,
          floating: true
        },
        yAxis: {
          labels: {
            enabled: false
          },
          tickPositions: [-1, -0.5, 0, 0.5, 1],
          title: {
            enabled: false
          },
          gridLineWidth: 0,
          max: 1
        },
        xAxis: {
          labels: {
            enabled: false
          },
          tickWidth: 0, 
          lineWidth: 0,
          gridLineWidth: 0
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          series: {
            lineWidth: 1
          }
        },
        series: [{
          name: 'I',
          turboThreshold: 200000,
          enableMouseTracking: false,
          marker: {
            enabled: false
          },
          data: (function() {
            const value = that.list
            var data = []

            for (let i = 0; i < value.length - 1; i += 1) {
              data.push({
                x: value[i][0],
                y: value[i][1]
              })
            }
            return data
          }()),
          zoneAxis: 'x',
          zones: [{
            value: 100,
            color: '#7cb5ec'
          }, {
            value: 300,
            color: '#ff0000'
            // dashStyle: 'dot'
          }]
        }]
      })
    },
    getData() {
      // debugger
      const data = Papa.parse(samplesData.samplesData).data
      var fecg_data = []
      for (var i = 2; i < data.length - 1; i++) {
        var item = data[i]
        var arr = []
        arr[0] = item[0].substring(0)
        arr[1] = item[1].substring(0)
        fecg_data[i] = arr
      }

      for (let k = 4; k < fecg_data.length - 1; k++) {
        var time = fecg_data[k]
        var time1 = time[0].trim().substring(3)
        var new_time = time1.split('.')
        fecg_data[k][0] = parseInt(new_time[0]) * 1000 + parseInt(new_time[1])
        fecg_data[k][1] = Number(fecg_data[k][1])
      }
      // console.log(fecg_data)
      this.fecg_data = fecg_data
      this.list = fecg_data.slice(4, fecg_data.length - 2)
      this.list1 = fecg_data.slice(4, 600)
      this.list2 = fecg_data.slice(4, 20)
      this.list2Value = 4
    },
    createGenreChart(item, index) {
      const that = this
      const widthValue1 = document.getElementById('bottom').offsetWidth * 0.55 * 0.25 - 12
      require('highcharts/modules/data')(Highcharts)
      Highcharts.chart(`genre${index}`, {
        chart: {
          type: 'spline',
          width: widthValue1,
          height: 160
          // backgroundColor: '#E7F2FF',
        },
        credits: {
          enabled: false
        },
        title: {
          text: item.name,
          align: 'left',
          floating: true,
          y: 20,
          style: {
            fontSize: '15px',
            marginTop: '30px'
            // color: '#FFF',
          }
        },
        subtitle: {
          enabled: false
        },
        yAxis: {
          labels: {
            enabled: false
          },
          tickPositions: [-1, -0.5, 0, 0.5, 1],
          title: {
            enabled: false
          },
          gridLineWidth: 0,
          max: 1
        },
        xAxis: {
          labels: {
            enabled: false
          },
          tickWidth: 0, 
          lineWidth: 0,
          gridLineWidth: 0
        },
        legend: {
          enabled: false
        },
        series: [{
          name: 'I',
          turboThreshold: 200000,
          enableMouseTracking: false,
          marker: {
            enabled: false
          },
          data: (function() {
            const value = that.list1
            var data = []

            for (let i = 0; i < value.length - 1; i += 1) {
              data.push({
                x: value[i][0],
                y: value[i][1]
              })
            }
            return data
          }()),
          zoneAxis: 'x',
          zones: [{
            value: 100,
            color: '#7cb5ec'
          }, {
            value: 300,
            color: '#ff0000'
            // dashStyle: 'dot'
          }]
        }]
      })
    },
    aaaa() {
      console.log('aaaa')
    },
    createCaseChart() {
      const that = this
      const widthValue = document.querySelector('#case').offsetWidth
      // const widthValue = window.innerWidth * 0.2
      require('highcharts/modules/data')(Highcharts)
      this.chart = Highcharts.chart('case', {
        chart: {
          type: 'spline',
          width: widthValue,
          height: 270
          // backgroundColor: '#E7F2FF',
        },
        credits: {
          enabled: false
        },
        title: {
          text: 1 / 100,
          align: 'left',
          floating: true,
          y: 0,
          style: {
            fontSize: '14px',
            marginTop: '30px'
          }
        },
        subtitle: {
          enabled: false
        },
        yAxis: {
          labels: {
            enabled: false
          },
          tickWidth: 0, 
          // tickPixelInterval: 10,
          tickPositions: [-1, -0.9, -0.8, -0.7, -0.6, -0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
          gridLineWidth: 0,
          // gridLineColor : '#ff6f009c',
          title: {
            enabled: false
          }
        },
        xAxis: {
          labels: {
            enabled: false
          },
          tickWidth: 0, 
          lineWidth: 0,
          tickPositioner: function() {
            var positions = [],
              tick = Math.floor(this.dataMin),
              // increment = 4;
              increment = Math.ceil((this.dataMax - this.dataMin) / 10)

            if (this.dataMax !== null && this.dataMin !== null) {
              for (tick; tick - increment <= this.dataMax; tick += increment) {
                positions.push(tick)
              }
            }
            return positions
          }
          // gridLineWidth: 1,
          // gridLineColor : '#ff6f009c',
        },
        legend: {
          enabled: false
        },
        series: [{
          name: 'I',
          turboThreshold: 200000,
          enableMouseTracking: false,
          marker: {
            enabled: false
          },
          data: (function() {
            const value = that.list2
            var data = []

            for (let i = 0; i < value.length - 1; i += 1) {
              data.push({
                x: value[i][0],
                y: value[i][1]
              })
            }
            return data
          }()),
          zoneAxis: 'x',
          zones: [{
            value: 100,
            color: '#7cb5ec'
          }, {
            value: 300,
            color: '#ff0000'
            // dashStyle: 'dot'
          }]
        }]
      })
    },
    scale(value) {
      console.log(value)
      const maxValue = 96
      const minValue = 16
      const fecg_data = this.fecg_data
      switch (value) {
        case -1: 
          if (this.scaleValue < minValue + 10) {
            this.scaleValue = minValue
          } else {
            this.scaleValue = this.scaleValue - 10
          }
          break
        case 0: 
          this.scaleValue = 16
          break
        case 1: 
          if (this.scaleValue >= maxValue - 10) {
            this.scaleValue = maxValue
          } else {
            this.scaleValue = this.scaleValue + 10
          }
          break
      }
      this.list2 = fecg_data.slice(this.list2Value, this.list2Value + this.scaleValue)
      const that = this
      this.chart.update({
        series: [{
          data: (function() {
            const value = that.list2
            var data = []

            for (let i = 0; i < value.length - 1; i += 1) {
              data.push({
                x: value[i][0],
                y: value[i][1]
              })
            }
            return data
          }())
        }]
      })
    },
    step(value) {
      console.log(value)
      const maxValue = 100
      const minValue = 4
      const fecg_data = this.fecg_data
      switch (value) {
        case -2: 
          this.list2Value = minValue
          this.list2 = fecg_data.slice(this.list2Value, this.list2Value + this.scaleValue)
          break
        case -1: 
          if (this.list2Value < minValue + 10) {
            this.list2Value = minValue
            this.list2 = fecg_data.slice(this.list2Value, this.list2Value + this.scaleValue)
          } else {
            this.list2Value = this.list2Value - 10
            this.list2 = fecg_data.slice(this.list2Value, this.list2Value + this.scaleValue)
          }
          break
        case 1: 
          if (this.list2Value > maxValue - 10 - this.scaleValue) {
            this.list2Value = maxValue - this.scaleValue
            this.list2 = fecg_data.slice(this.list2Value, maxValue)
          } else {
            this.list2Value = this.list2Value + 10
            this.list2 = fecg_data.slice(this.list2Value, this.list2Value + this.scaleValue)
          }
          break
        case 2: 
          this.list2Value = maxValue - this.scaleValue
          this.list2 = fecg_data.slice(this.list2Value, maxValue)
          break
      }
      const that = this
      this.chart.update({
        series: [{
          data: (function() {
            const value = that.list2
            var data = []

            for (let i = 0; i < value.length - 1; i += 1) {
              data.push({
                x: value[i][0],
                y: value[i][1]
              })
            }
            return data
          }())
        }]
      })
    },
    mousedown(e, data) {
      document.onmousemove = (e) => {
        // console.log('e.clientX:' + e.clientX)
        const min = document.querySelector('#case').getBoundingClientRect().left
        const max = document.querySelector('#case').getBoundingClientRect().right
        if (e.clientX < min || e.clientX > max) {
          return
        }
        switch (data) {
          case 'E':
            this.locationE = e.clientX - min
            break
          case 'J':
            this.locationJ = e.clientX - min
            break
          case 'ST':
            this.locationST = e.clientX - min
            break
          case 'T':
            this.locationT = e.clientX - min
            break
        }
      }
      document.onmouseup = () => {
        document.onmousedown = null
        document.onmousemove = null
      }
    },
    resetDataList2() {
      this.dataList2 = [{
        name: 'E点到R点',
        value: 265
      }, {
        name: 'J点到R点',
        value: 46
      }, {
        name: 'ST测点到J点',
        value: 62
      }, {
        name: 'T波结束点到R点',
        value: 381
      }]
    },
    avFHandleClose() {
      this.dialogAvFVisible = false
    },
    optionHandleClose() {
      this.dialogOptionVisible = false
    }
  }
}

</script>

<style lang="scss" scoped>
    #analyse {
        width: 100%;
        height: 100%;
        // display: flex;
        .copy {
            padding: 10px;
            margin-bottom: 10px;
        }
        .top {
            width: 100%;
        }
        .bottom {
            display: flex;
            .right {
                flex: 0 0 55%;
                width: 55%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                .genre {
                    // flex: 0 0 25%;
                    border: 1px solid #9797973b;
                    border-radius: 6px;
                    margin: 5px;
                    width: calc(25% - 12px);
                    height: 160px;
                    // height: 100px;
                }
            }
            .title {
                font-family: PingFangSC-Medium;
                font-size: 16px;
                color: #0A1F44;
                letter-spacing: 0;
                line-height: 24px;
                display: block;
                font-weight: 600;
                margin-bottom: 13px;
            }
            .left {
                flex: 0 0 45%;
                position: relative;
                margin-top: 5px;
                background: #FFF;
                .l-top {
                    display: flex;
                    .l-top-left {
                        position: relative;
                        flex: 1;
                        border: 1px solid #979797;
                        #case {
                            margin-top: 40px;
                        }
                        .bg {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            width: 100%;
                            height: 270px;
                            padding-top: 40px;
                        }
                        .plotLineText {
                            position: absolute;
                            color: red;
                            top: 275px;
                        }
                        .scaleList {
                            position: absolute;
                            top: 8px;
                            right: 0;
                            display: flex;
                            img {
                                width: 16px;
                                height: 16px;
                                margin-right: 10px;
                            }
                        }
                        .stepList {
                            background-image: linear-gradient(-180deg, #FCFCFD 0%, #DCDBDD 100%);
                            border: 1px solid rgba(151,151,151,0.14);
                            border-radius: 4px;
                            height: 56px;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            display: flex;
                            justify-content: space-evenly;
                            align-items: center;

                            img {
                                width: 24px;
                                height: 24px;
                            }
                        }
                    }
                    .l-top-right {
                        flex: 1;
                        .list {
                            display: flex;
                            align-items: baseline;
                            justify-content: space-between;
                            padding-right: 15px;
                            .el-input {
                                width: 50%;
                            }
                            .el-select {
                                width: 50%;
                            }
                            .name {
                                font-size: 14px;
                                color: #4A4A4A;
                                text-align: left;
                                width: 120px;
                                display: inline-block;
                            }
                            .unit {
                                font-size: 14px;
                                color: #4A4A4A;
                                margin-left: 10px;
                            }
                        }
                        .item {
                            margin-top: 10px;
                        }
                    }
                }
                .l-bottom {
                    .l-bottom-top {
                        display: flex;
                        justify-content: space-between;
                        padding: 15px 15px 0 15px;
                        .list {
                            display: flex;
                            flex-direction: column;
                            .name {
                                font-family: Helvetica;
                                font-size: 12px;
                                color: #53627C;
                                letter-spacing: 0;
                                line-height: 16px;
                                margin-bottom: 6px;
                            }
                        }
                    }
                    .l-bottom-bottom {
                        display: flex;
                        justify-content: space-between;
                        // margin-top: 24px;
                        padding: 15px;
                        .startAnalyse {
                            background: #0C66FF;
                            border-color: #0C66FF;
                            color: #FFF;
                            width: 185px;
                        }
                        .otherBtn {
                            width: 185px;
                        }
                        &::before {
                            content: "";
                            width: 195px;
                        }
                    }
                }
            }
            
        }
        .el-dialog {
            .five {
                .five-list-box {
                    display: flex;
                    flex-wrap: wrap;
                    .five-list {
                        margin-right: 10px;
                        .name {
                            font-size: 14px;
                            color: #4A4A4A;
                            text-align: left;
                            width: 120px;
                            display: inline-block;
                        }
                        .el-input {
                            width: 100px;
                        }
                    }
                }
            }
            .list {
                margin-top: 10px;
                .name {
                    font-size: 14px;
                    color: #4A4A4A;
                    text-align: left;
                    width: 100px;
                    display: inline-block;
                }
                .el-select {
                    width: 115px;
                }
            }
        }
    }
</style>



